<template>
  <div id="proxy-data">
    <div class="content-data" v-if="proxyObj.hasOwnProperty('management')">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="代理奖励" name="first">
                <div class="header">
                    <div class="row-data">
                        <div class="title"> {{ $t('member.proxy.data.myAgentReward') }}</div>
                        <div class="num">{{ proxyObj.management.managementAward }} RP</div>
                        <div class="num">{{ proxyObj.management.gp_bonus }} USDT</div>

                    </div>
                    <div class="row-data">
                        <div class="title"> {{ $t('member.proxy.data.dividendThisMonth') }}</div>
                        <div class="num">{{ proxyObj.management.month_management_award }} RP</div>
                        <div class="num">{{ proxyObj.management.prev_month_management_award }} USDT</div>

                    </div>
                    <div class="row-data">
                        <div class="title"> {{ $t('member.proxy.data.dividendLastMonth') }}</div>
                        <div class="num">{{ proxyObj.management.prev_month_management_award }} RP</div>
                        <div class="num">{{ proxyObj.management.prev_month_gp_bonus }} USDT</div>

                    </div>

                </div>
                <el-tabs type="border-card" v-model="activeItemName" @tab-click="changTabItemHandle">
                    <el-tab-pane :label="$t('member.proxy.data.regionalAgent')" name="first"></el-tab-pane>
                    <el-tab-pane :label="$t('member.proxy.data.gpManagementFund')" name="second"></el-tab-pane>
                    <div class="content" v-loading="loadingRewar">
                        <div class="blance-table" >
                            <el-table
                                :data="itemRewardArr"
                                style="width: 100%">

                                <el-table-column
                                    :label="$t('member.proxy.data.rewardUSDT') ">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.money }}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                    :label="$t('member.proxy.data.rewardRP') ">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.create_time }}</span>
                                    </template>
                                </el-table-column>

                            </el-table>
                            <el-pagination @current-change="ItemPageChange"
                                           :current-page.sync="itemPageNo"
                                           :page-size="itemLimit"
                                           layout="total, prev, pager, next"
                                           :total="itemTotalCount">
                            </el-pagination>
                        </div>
                    </div>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="代理分红" name="second">
                <div class="header">
                    <div class="row-data">
                        <div class="title"> {{ $t('member.proxy.data.myAgentDividend') }}</div>
                        <div class="num">{{ proxyObj.abonus.bouns_total }}  {{ $t('commons.symbol') }}</div>
                    </div>
                    <div class="row-data">
                        <div class="title"> {{ $t('member.proxy.data.dividendsThisQuarter') }}</div>
                        <div class="num">{{ proxyObj.abonus.season_bonus }} {{ $t('commons.symbol') }}</div>
                    </div>
                    <div class="row-data">
                        <div class="title"> {{ $t('member.proxy.data.lastQuarterDividend') }}</div>
                        <div class="num">{{ proxyObj.abonus.prev_season_bonus }} {{ $t('commons.symbol') }}</div>
                    </div>
                </div>
                <div class="content">
                    <div class="row-wrap">
                        <div class="title"> {{ $t('member.proxy.data.myTeamDividend') }}</div>
                        <div class="row-num">
                            <div class="num">{{ totalU }} {{ $t('commons.symbol') }}</div>
                        </div>
                    </div>
                    <div class="blance-table" >
                        <el-table
                            :data="proxyArr"
                            style="width: 100%">
                            <el-table-column
                                style="padding-left: 25px;"
                                :label="$t('member.proxy.data.source') "
                                width="120">
                                <template slot-scope="scope">
                                    <span> {{ scope.row.member_id }}</span>
                                </template>

                            </el-table-column>
                            <el-table-column
                                :label="$t('member.proxy.data.regionalAgent') ">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.level_name2 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                :label="$t('member.proxy.data.reward')+' /'+$t('commons.symbol') ">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.bonus || 0.0000}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                :label="$t('member.proxy.data.reward')" align="right">
                                <template slot-scope="scope">
                                    <span>{{ $util.timeStampTurnTime(scope.row.create_time)}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @current-change="pageChange"
                                       :current-page.sync="pageNo"
                                       :page-size="10"
                                       layout="total, prev, pager, next"
                                       :total="totalCount">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>


    </div>
  </div>
</template>

<script>
import { getMemberInfo, getProxy , memberaccountPage, memberaccountCredit} from '@/api/member/member';
export default {
  data() {
    return {
      proxyArr:[],
      pageNo: 1,
        itemLimit: 10,
        itemPageNo: 1,
        itemTotalCount: 0,
      totalCount: 1,
        memberInfo: {},
        proxyObj: {},
        defaultInfo: {
            topStyle: 'default',
            bgColor: '#ff454f',
            textColor: '#fff',
            bgImg: '',
            menuList: [],
            insertGap: '0',
            menuStyle: 'palace',
            level: 1
        },
        token: '',
        active: 'first',
        totalU: 0,
        activeName: 'first',
        activeItemName: 'first',
        itemRewardArr: [],
        loadingRewar: true
    };
  },
  created() {
      this.getProxyHandle();
      this.changTabItemHandle();
  },
  mounted() {

  },
  methods: {
      handleClick(tab, event) {
          console.log(tab, event);
      },
      ItemPageChange(e){
          this.itemPageNo = e;
          this.changTabItemHandle();
      },
      async changTabItemHandle(){
          this.loadingRewar = true;
          let data = {};
          if (this.activeItemName ==='first'){
              data = {
                  type: 2,
                  log_type: 11,
                  page: this.itemPageNo,
                  page_size: this.itemLimit
              };
              await memberaccountCredit(data).then(res=>{
                  if(res.code == 0){
                      this.itemRewardArr = res.data.list.list|| [];
                      this.itemTotalCount = res.data.list.count;
                  }
              })
          }else{
              data = {
                  account_type: 'balance',
                  from_type: 'management',
                  page: this.itemPageNo,
                  page_size: this.itemLimit
              };
             await memberaccountPage(data).then(res=>{
                  if(res.code == 0){
                      this.itemRewardArr = res.data.list|| [];
                      this.itemTotalCount = res.data.count;
                  }
              })
          }
          this.loadingRewar = false;

      },
      getProxyHandle(){
          getProxy().then(res=>{
              if(res.code == 0){
                  this.proxyObj = res.data;
                  this.proxyArr = res.data.abonus.team_bonus || [];
                  console.log(this.proxyArr)
                  let totalU = 0;
                  this.proxyArr.forEach((item)=>{
                      totalU +=  Number(item.bonus)
                  })
                  this.totalU = totalU;
              }
          })
      },

      pageChange(){

    },
  }
};
</script>

<style lang="scss">
  #proxy-data {
    .blance-table {
      th {
        background: #FAFAFA;
      }
      th:first-child,td:first-child {
        padding-left: 20px;
      }
      th:nth-child(4),td:nth-child(4) {
        padding-right: 20px;
      }
    }
  }
</style>


<style scoped lang="scss">
  .header {
    width: 100%;
    background: #fff;
    padding: 36px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .row-data {
      width: 33%;
      .title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        line-height: 20px;
        margin-bottom: 18px;
      }
      .num {
        margin-bottom: 6px;
        font-size: 18px;
        font-weight: 600;
        color: #FF547B;
        line-height: 25px;
      }
    }
  }

  .content {
    width: 100%;
    background: #fff;
    .row-wrap {
      padding: 26px 20px 17px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        line-height: 20px;
        margin-bottom: 18px;
      }
      .row-num {
        display: flex;
        align-items: center;
        .num {
          font-size: 18px;
          font-weight: 600;
          color: #FF547B;
          line-height: 25px;
        }
        .num:first-child {
          margin-right: 168px;
        }
      }
    }
  }
</style>
